<template>
    <view class="component-order-item">
        <view class="order-header">
            <view class="state-text" :style="{ color: stateTextColor }">
                <text>{{ stateText }}</text>
            </view>
            <view class="more">
                <text class="text">详情</text>
                <text class="iconfont icon-jinru"></text>
            </view>
        </view>
        <view class="order-body">
            <view class="order-desc-row">
                <text class="title">订单编号：</text>
                <text class="text">{{ order.orderId }}</text>
                <text class="copy" @click.stop="copyOrderId(order.orderId)">复制</text>
            </view>
            <block v-if="order.listType != 't3'">
                <view class="order-desc-row">
                    <text class="title">服务分类：</text>
                    <text class="text">{{ order.cate }}</text>
                </view>
                <view class="order-desc-row limit-line clamp-1">
                    <text class="title">需求内容：</text>
                    <text class="text">{{ order.content }}</text>
                </view>
            </block>
            <view class="order-desc-row">
                <text class="title">下单时间：</text>
                <text class="text">{{ order.createTime }}</text>
            </view>
            <view class="order-desc-row">
                <text class="title">服务时间：</text>
                <text class="text">{{ order.serviceTime }}</text>
                <block v-if="order.state == 0 || order.state == 1 || order.state == 2">
                    <view class="btn" @click.stop="changeTime">
                        <text class="iconfont icon-bianji"></text>
                        <text class="btn-desc">修改时间</text>
                    </view>
                </block>
            </view>
            <!-- 购买订单|报/议价订单|货运订单 可展示师傅信息 -->
            <block v-if="order.listType == 't1' || order.listType == 't2' || order.listType == 't3'">
                <view class="order-worker-box">
                    <!-- 报价订单未选择师傅 展示师傅列表 -->
                    <block v-if="order.listType == 't2' && order.orderType == 2 && order.state == 0">
                        <view class="worker-list-group">
                            <view class="list-group">
                                <view class="list-item" v-for="(item, index) in previewWorkerList" :key="index">
                                    <image class="cover" :src="item.avatar" mode="aspectFill" />
                                    <text class="price">¥ {{ item.price }}</text>
                                </view>
                            </view>
                            <view class="more-worker">
                                <text class="worker-num">{{ order.workerList.length }}位师傅已报价</text>
                                <text class="iconfont icon-jinru"></text>
                            </view>
                        </view>
                    </block>
                    <!-- 购买订单|报/议价订单已选择师傅 展示师傅简介 -->
                    <block
                        v-if="
                            (order.listType == 't1' && order.state != 0 && order.state != 1) ||
                            (order.listType == 't2' && order.state != 0) ||
                            (order.listType == 't3' && order.state != 0 && order.state != 1)
                        "
                    >
                        <view class="worker-item-box">
                            <worker-item :data="order.worker" :showPrice="order.listType != 't3'" />
                        </view>
                    </block>
                </view>
            </block>
        </view>
        <view class="order-footer">
            <slot></slot>
        </view>
    </view>
</template>

<script>
import WorkerItem from "@/components/worker/item";
export default {
    name: "component-order-item",
    data() {
        return {
            stateText: "",
            stateTextColor: "",
            stateDesc: "",
            previewWorkerList: [],
        };
    },
    props: {
        order: {
            type: Object,
            default: () => {},
        },
    },
    components: {
        WorkerItem,
    },
    async created() {
        if (this.$utils.isType(this.order.workerList, "array")) {
            for (let index = 0; index < 3; index++) {
                if (this.order.workerList[index]) {
                    this.previewWorkerList.push(this.order.workerList[index]);
                } else break;
            }
        }
        let [stateText, stateDesc, stateTextColor] = await this.$models.order.stateText(
            this.order.listType,
            this.order.orderType,
            this.order.state
        );
        this.stateText = stateText;
        this.stateTextColor = stateTextColor || "#000000";
    },
    mounted() {},
    destroyed() {},
    methods: {
        copyOrderId(orderId) {
            const that = this;
            uni.setClipboardData({
                data: orderId,
                showToast: false,
                success(result) {
                    that.$utils.toast("内容已复制");
                },
                fail(error) {
                    that.$utils.toast("复制失败");
                },
            });
        },
        changeTime() {
            this.$emit("changeTime");
        },
    },
};
</script>

<style lang="less" scoped>
.component-order-item {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    .order-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 32rpx;
        padding: 30rpx 0 18rpx 0;
        .state-text {
            font-size: 30rpx;
            font-weight: bold;
        }
        .more {
            font-size: 26rpx;
            color: #666666;
            display: flex;
            align-items: center;
        }
        .iconfont {
            color: #a7a7a7;
            font-size: 32rpx;
            margin-left: 8rpx;
        }
    }
    .order-body {
        width: 100%;
        border-bottom: 2rpx solid #e8e7e7;
        padding: 18rpx 0;
    }
    .order-desc-row {
        position: relative;
        width: 100%;
        height: 30rpx;
        font-size: 28rpx;
        line-height: 30rpx;
        margin-bottom: 22rpx;
        .title {
            color: #999999;
        }
        .text {
            color: #000000;
        }
        .copy {
            color: #8194f2;
            margin-left: 24rpx;
        }
        .btn {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            align-items: center;
            line-height: 30rpx;
            color: #999999;
        }
        .btn-desc {
            font-size: 24rpx;
        }
        .iconfont {
            font-size: 30rpx;
            margin-right: 4rpx;
        }
    }
    .order-desc-row:last-child {
        margin-bottom: 0;
    }
    .order-worker-box {
        width: 100%;
    }
    .worker-item-box {
        width: 100%;
        padding: 20rpx 0 10rpx 0;
    }
    .worker-list-group {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 20rpx 0 10rpx 0;
        .list-group {
            display: flex;
        }
        .list-item:first-child {
            margin-left: 0;
        }
        .list-item {
            display: flex;
            align-items: center;
            flex-direction: column;
            margin-left: 36rpx;
        }
        .cover {
            width: 110rpx;
            height: 110rpx;
            box-sizing: border-box;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 8rpx;
        }
        .price {
            font-size: 26rpx;
            font-weight: bold;
            color: #ec7655;
        }
        .more-worker {
            display: flex;
            align-items: center;
        }
        .worker-num {
            font-size: 26rpx;
            font-weight: bold;
            color: #666666;
        }
        .iconfont {
            font-size: 32rpx;
            color: #a7a7a7;
        }
    }
    .order-footer {
        width: 100%;
    }
}
</style>